<template>
  <div class="member-center page">
    <!-- 顶部会员卡区域 -->
    <div class="member-header">
      <h2 class="page-title">会员中心</h2>
      <div class="card-container">
        <div class="vip-card">
          <div class="card-content">
            <h3 class="card-title">顺达会员卡</h3>
            <p class="card-subtitle">VIP SHUNDAA</p>
            <p class="card-benefit">开通会员卡立享8项出行特权</p>
            <van-button class="open-btn" type="primary" size="large">立即开通</van-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 会员特权区域 -->
    <div class="privilege-section">
      <div class="section-title">
        <span>会员特权</span>
        <van-nav-bar
          title=""
          right-arrow
          @click-right="viewAllPrivileges"
          class="view-all"
        >
        </van-nav-bar>
      </div>
      <div class="privilege-grid">
        <div
          v-for="(item, index) in privilegeList"
          :key="index"
          class="privilege-item"
        >
          <div class="icon-box">
            <!-- 注意：路径指向 assets/MemberCenter/ 目录 -->
            <img :src="item.icon" alt="特权图标" class="privilege-icon" />
          </div>
          <p class="item-text">{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 会员特权数据（路径指向 MemberCenter 目录）
const privilegeList = ref([
  { icon: '/src/assets/MemberCenter/icon1.png', text: '积分3倍' },
  { icon: '/src/assets/MemberCenter/icon2.png', text: '免排队' },
  { icon: '/src/assets/MemberCenter/icon3.png', text: '实时路况' },
  { icon: '/src/assets/MemberCenter/icon4.png', text: '行程提醒' },
  { icon: '/src/assets/MemberCenter/icon5.png', text: '优先派单' },
  { icon: '/src/assets/MemberCenter/icon6.png', text: '拥堵避让' },
  { icon: '/src/assets/MemberCenter/icon7.png', text: '专属优惠券' },
  { icon: '/src/assets/MemberCenter/icon8.png', text: '24h专属客服' },
]);

const viewAllPrivileges = () => {
  console.log('跳转至全部特权页面');
};
</script>

<style lang="scss" scoped>
// 定义橙色主题色变量
$primary-orange: #ff7d00;
$orange-light: #ff9e33;
$orange-dark: #e66700;
$orange-bg: #fff8f0;

.member-center {
  background: $orange-bg;
  padding: 20px 15px;

  .member-header {
    background: linear-gradient(135deg, $primary-orange, $orange-light);
    color: #fff;
    padding: 10px 20px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(255, 125, 0, 0.2);

    .page-title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 24px;
      text-align: center;
    }

    .card-container {
      .vip-card {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 30px 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

        .card-content {
          text-align: center;
          
          .card-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            background: linear-gradient(90deg, #fff, #fff8e6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
          }
          
          .card-subtitle {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 16px;
          }
          
          .card-benefit {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 24px;
            line-height: 1.5;
          }
          
          .open-btn {
            background: #fff;
            border-color: #fff;
            color: $primary-orange;
            font-size: 16px;
            font-weight: 500;
            width: 100%;
            padding: 12px 0;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
          }
        }
      }
    }
  }

  .privilege-section {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      
      span {
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }
      
      .view-all {
        --nav-bar-height: 32px;
        --nav-bar-title-font-size: 14px;
        --nav-bar-right-color: $primary-orange;
        --nav-bar-arrow-size: 16px;
        margin: 0;
      }
    }

    .privilege-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .privilege-item {
        width: 23%;
        text-align: center;
        margin-bottom: 24px;

        .icon-box {
          width: 60px;
          height: 60px;
          background: #fff3e6;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 10px;
          
          .privilege-icon {
            width: 32px;
            height: 32px;
          }
        }
        
        .item-text {
          font-size: 14px;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
}
</style>